<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>YAML | Example &quot;fullpage_grids&quot;</title>
<!-- (en) Add your meta data here -->
<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
<link href="css/layout_grids.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="css/patches/patch_grids.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<!-- skip link navigation -->
<ul id="skiplinks">
	<li><a class="skip" href="#nav">Skip to navigation (Press Enter).</a></li>
	<li><a class="skip" href="#main" >Skip to main content (Press Enter).</a></li>
</ul>

  <div id="topnav" role="contentinfo">
    <div class="page_margins">
      <div class="page">
        <span class="navlinks">
  			<a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a>
        </span>
        This is the perfect place for a secondary webpage title
      </div>
    </div>
  </div>

  <div id="nav" role="navigation">
    <div class="page_margins">
      <div class="page">
        <div class="hlist">
          <!-- main navigation: #nav_main -->
          <ul>
            <li><a href="../index.html">Table Of Contents <span>short desc</span></a>            </li>
            <li><a href="../08_special_interest/3col_fullheight.html">Next Example <span>short desc</span></a></li>
            <li><a href="fullpage_3col.html">Previous Example <span>short desc</span></a></li>
            <li><a href="#">Button 4<span>short desc</span></a></li>
            <li><a href="#">Button 5<span>short desc</span></a></li>
            <li class="active"><strong>Active Button<span>short desc</span></strong></li>
            <li><a href="#">Button 7<span>short desc</span></a></li>
            <li class="last" ><a href="#">Button 8<span>short desc</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div id="header" role="banner">
    <div class="page_margins">
      <div class="page">
    <h1>Example | Beispiel <em>&laquo;fullpage_grids&raquo;</em> </h1>
    <span>YAML &#8226; (X)HTML/CSS Framework</span>
      </div>
    </div>
  </div>

  <div id="main">
    <div class="page_margins">
      <div class="page">
        <div class="subcolumns">
          <div class="c50l">
            <div class="subcl">
              <!-- Insert your subtemplate content here -->
              <h2>H2 Heading</h2>
              <p class="floatbox"><img src="images/dummy_150.png" alt="dummy" class="float_left" />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
              <div class="subcolumns">
                <div class="c33l">
                  <div class="subcl">
                    <!-- Insert your subtemplate content here -->
                    <h5>H5 Heading</h5>
                    <ul>
                      <li>List Item 1</li>
                      <li>List Item 2</li>
                      <li>List Item 3</li>
                    </ul>
                  </div>
                </div>
                <div class="c33l">
                  <div class="subc">
                    <!-- Insert your subtemplate content here -->
                    <h5>H5 Heading</h5>
                    <ul>
                      <li>List Item 1</li>
                      <li>List Item 2</li>
                      <li>List Item 3</li>
                    </ul>
                  </div>
                </div>
                <div class="c33r">
                  <div class="subcr">
                    <!-- Insert your subtemplate content here -->
                    <h5>H5 Heading</h5>
                    <ul>
                      <li>List Item 1</li>
                      <li>List Item 2</li>
                      <li>List Item 3</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c25l">
            <div class="subc">
              <!-- Insert your subtemplate content here -->
              <h3>H3 Heading</h3>
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
            </div>
          </div>
          <div class="c25r">
            <div class="subcr">
              <!-- Insert your subtemplate content here -->
              <div class="info">
              <h3>About this example</h3>
              <p>This is a more advanced example to show the multiple usage of<code> .page_margins</code> and <code>.page</code> to create flexible full-page layouts in combination with YAML's powerful <a href="http://www.yaml.de/en/documentation/practice/subtemplates.html">subtemplates</a>.</p>
              <p>The upper <code>#main</code> content area (white background) is subdivided into three sections of 50% | 25% | 25% width.</p>
              <p>The lower <code>#extended</code> content area (gray background) is subdivided in the same way, but in addition uses YAML's equal heights solution to get these full height vertical column dividers.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="extended">
    <div class="page_margins">
      <div class="page">
        <div class="subcolumns equalize">
          <div class="c25l">
            <div class="subcl">
              <!-- Insert your subtemplate content here -->
              <h4>H4 Heading</h4>
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
            </div>
          </div>
          <div class="c50l">
            <div class="subc">
              <!-- Insert your subtemplate content here -->
              <h4>H4 Heading</h4>
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</p>
            </div>
          </div>
          <div class="c25r">
            <div class="subcr">
              <!-- Insert your subtemplate content here -->
              <h4>H4 Heading</h4>
              <p>Lorem ipsum dolor s  it amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- begin: #footer -->
  <div id="footer" role="contentinfo">
    <div class="page_margins">
      <div class="page">
     <p>Footer with copyright notice and status information<br />
        Layout based on <a href="http://www.yaml.de/">YAML</a></p>
      </div>
    </div>
  </div>
<!-- full skiplink functionality in webkit browsers -->
<script src="../../yaml/core/js/webkit-focusfix.js" type="text/javascript"></script>
</body>
</html>
